<template>
  <div class="app-container">
    <div><span><h1><center>秦皇岛海域风玫瑰图</center></h1></span></div>  
    <div id="commandstats" style="width:1500px ;height: 600px; margin:0 auto;"></div>
  </div>
</template>

<script>
import * as Echarts from "echarts";
import {windChartlist} from "@/api/seaTotal/seaData";
export default {
  name: "windEchart",
  data() {
    return {};
  },
  created() {
    //this.openLoading();
    this.getList();
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    getList() {
      this.loading = true;
      windChartlist().then((response) => {
      });
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载海洋图数据，请稍候！");
    },
    initEcharts() {
      this.myChart2 = Echarts.init(document.getElementById("commandstats"));
      this.myChart2.setOption({
        tooltip: {},
        angleAxis: {
          type: "category",
          data: [
            "N",
            "NNE",
            "NE",
            "ENE",
            "E",
            "ESE",
            "SE",
            "SSE",
            "S",
            "SSW",
            "SW",
            "WSW",
            "W",
            "WNW",
            "NW",
            "NWW",
          ],
          z: 1,
          boundaryGap: false,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ddd",
              type: "solid",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "blue",
              type: "solid",
            },
          },
        },
        axisTick: {
          show: false,
        },
        radiusAxis: {
          center: ["50%", "50%"],
        },
        grid: {
          x: 140,
          x2: 100,
          y2: 150,
        },
        polar: {},
        series: [
          {
            name: "方向/风速",
            type: "bar",
            stack: "name",
            data: [1.1, 2.96, 2.53, 1.97, 1.32, 1.58, 1.6, 1.9,6.1,3.1,3.4,5.2,2.6,8.9,9.4,1.9],
            coordinateSystem: "polar",
          },
          {
            name: "方向/风速",
            type: "bar",
            stack: "name",
            color: "#000",
            data: [0.59, 2.96, 2.53, 1.5, 1.32, 1.58, 1.6, 1.9],
            coordinateSystem: "polar",
          },
          {
            name: "方向/风速",
            type: "bar",
            stack: "name",
            color: "#ee4",
            data: [0.59, 2.96, 2.53, 1.99, 1.32, 1.58, 1.6, 1.9],
            coordinateSystem: "polar",
          },
        ],
      });
    },
  },
};
</script>
